<template>
    <div class="addtag">
      <el-input
             class="input-new-tag"
             v-if="inputVisible"
             v-model.trim="tagdata.field_name"
             ref="saveTagInput"
             size="small"
             @keyup.enter.native="handleInputConfirm"
             @blur="handleInputConfirm"
           >
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">{{tagdata.field_name}}</el-button>
    </div>
</template>

<script>
export default {
  name: 'AddTag',
  props: {
    tagdata: {
      type: Object,
      default () {
        return {

        }
      }
    }

  },
  data () {
    return {
      inputVisible: false,
      dynamicTags: []
    }
  },
  methods: {
    showInput () {
      var othis = this
      this.inputVisible = true
      this.$nextTick(_ => {
        othis.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm () {
      let inputValue = this.tagdata.text
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false

      this.$emit('setValue', this.tagdata)
      // this.data.text = '';
    }
  }
}
</script>

<style lang="stylus" scoped>
  .addtag >>> .el-button--small
    width 100%
    height 26px
  .addtag >>> .el-button
    padding 0
  .addtag >>> .el-input__inner
    height 26px
    font-size 12px
    text-align center
  .addtag
    margin-bottom 16px;
    width: 84px;
    height: 26px;
    margin-right: 16px;
    float: left;
    .input-new-tag
      width: 100%
      height 26px
</style>
